﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}

@section Content{
    <style>
        .form .formValue input.form-control {
            height: 32px;
            line-height: 32px;
            padding: 0px;
            resize: none;
            border-radius: 0px;
            box-shadow: none;
            text-indent: 5px
        }

        .btn-default .badge-danger {
            background-color: red;
        }


        .selectbox {
            color: #444;
            line-height: 34px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 34px;
            width: 100%;
        }

        .topPanel {
            height: 150px;
        }

            .topPanel .search {
                padding-top: 10px;
            }

        .zdyUL {
            list-style-type: none;
            margin: 5px 0px 0px -3px;
            padding: 0px;
        }

            .zdyUL li {
                float: left;
                list-style: none;
                height: 24px;
                line-height: 22px;
            }

                .zdyUL li a {
                    cursor: pointer;
                    padding: 5px 10px;
                    border-radius: 4px;
                }

                .zdyUL li i {
                    margin-right: 4px;
                    font-size: 13px;
                    color: #666;
                    vertical-align: middle;
                    margin-top: -1px;
                }

                .zdyUL li a:hover {
                    text-decoration: none;
                    background-color: #1ABC9C;
                    color: #fff;
                }
    </style>
}
<div class="topPanel">
    <div class="toolbar">
        <div class="btn-group">
            <a class="btn btn-primary" onclick="$.reload()"><span class="glyphicon glyphicon-refresh"></span></a>

        </div>
    </div>
    <div class="search" style="width:90%">
        <table style="width:100%">
            <tr>
                <td>
                    <div class="input-group" style="float:left; padding-right:20px; width:200px">
                        <select id="F_Source" name="F_Source" class="select2">
                            <option value="-1">==请选择需求来源==</option>
                            <option value="0">400电话</option>
                            <option value="1">销售自拓</option>
                            <option value="2">网站订单</option>
                            <option value="3">小程序订单</option>
                            <option value="4">App订单</option>
                        </select>
                    </div>
                    <div class="input-group" style="float:left; padding-right:20px; width:200px">

                        <select id="F_ActivityType" name="F_ActivityType" class="select2">
                            <option value="">==请选择活动类型==</option>
                        </select>

                    </div>
                    <div class="input-group" style="float:left; padding-right:20px;  width:200px">

                        <input id="F_CreatorDate" placeholder="创建开始时间" name="F_CreatorDate" type="text" class="form-control input-wdatepicker required" readonly onfocus="WdatePicker()" style="width:95px;">
                        <div class="input-group-addon" style="border-right-width: 0; border-left-width: 0;">至</div>
                        <input id="F_CreatorDate2" placeholder="创建结束时间" name="F_CreatorDate2" type="text" class="form-control input-wdatepicker required" readonly onfocus="WdatePicker()" style="width:95px;">

                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="input-group" style="float:left; padding-right:20px;">
                        <input id="txt_keyword" type="text" class="form-control" placeholder="请输入要查询活动名称" style="width: 200px;">
                    </div>
                    <div class="btn-group" style="float:left; padding-right:20px;">
                        <a class="btn btn-primary" id="btn_search">按条件搜索</a>
                    </div>
                    <div class="clearfix"></div>
                    <div id="search_orderState" class="btn-group">
                        <a class="btn btn-default active btn-returnState" data-value="-1">全部&nbsp;<span id="orderState" class="badge badge-danger"></span></a>
                        <a class="btn btn-default btn-returnState" data-value="0">未回访&nbsp;<span id="orderState1" class="badge badge-danger"></span></a>
                        <a class="btn btn-default btn-returnState" data-value="1">已回访&nbsp;<span id="orderState2" class="badge badge-danger"></span></a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="gridPanel">
    <table id="gridList"></table>
    <div id="gridPager"></div>
</div>
<script>
    var returnState = -1;
    var citys = [];
    var stateArr = ['无效', '有效', '信息不完整'];

    $(function () {
        GetItems();

        $(".select2").select2();
        $.ajax({
            url: "/OrderFlowManage/ClientOrder/GetCitysJson",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {
                citys = data;
            }
        });


        gridList();
        redrawGrid();
    });

    function gridList() {
        var $gridList = $("#gridList");

        $gridList.dataGrid({
            url: "/OrderFlowManage/ClientOrder/GetReturnVisitRecordGridJson",
            height: $(window).height() - 176,
            colModel: [
                {
                    label: '操作', width: 50, name: 'F_Id', align: 'center', sortable: false,
                    formatter: function (cellvalue, options, rowObject) {

                        if (rowObject.IsContainReturnVisitRecord) {
                            return "";
                        }

                        return '<div class="btn-group btn-group-xs" style="margin-top:5px;">'
                            + '   <button type="button" class="btn btn-link" onclick="btn_edit(\'' + cellvalue + '\')">回访</button>'
                            + '</div>';
                    }
                },
                {
                    label: '活动城市', name: 'F_ActivityCityId', width: 150, sortable: false, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue) {
                            var arr = cellvalue.indexOf(',') == -1 ? [cellvalue] : cellvalue.split(',');
                            var result = [];
                            for (var i = 0; i < citys.length; i++) {
                                var ele = citys[i];
                                for (var j = 0; j < arr.length; j++) {
                                    var val = arr[j];
                                    if (val == ele.Value) {
                                        result.push(ele.Text);
                                    }
                                }
                            }
                            return result.toString();
                        }
                        return '';
                    }
                },
                {
                    label: '活动日期', name: 'F_ActivityStartDate', width: 150, sortable: false, align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        var start = cellvalue ? cellvalue.split(' ')[0] : '';
                        var end = rowObject.F_ActivityEndDate ? rowObject.F_ActivityEndDate.split(' ')[0] : '';
                        return start + '~' + end;
                    }
                },
                { label: '活动主题', name: 'F_ActivityTheme', width: 100, sortable: false, align: 'left' },
                { label: '活动类型', name: 'F_ActivityTypeName', width: 80, sortable: false, align: 'left' },
                {
                    label: '预算金额(元)', name: 'F_DemandCash', width: 80, align: 'left', sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        ;
                        return (cellvalue || "").toString();
                    }
                },
                { label: '场地大小(㎡)', name: 'F_SiteArea', width: 100, sortable: false, align: 'left' },
                {
                    label: '联系人', name: 'F_Contact', width: 80, sortable: false, align: 'left'
                },
                { label: '公司名称', name: 'F_ClientName', width: 100, sortable: false, align: 'left' },
                {
                    label: '状态', name: 'F_State', width: 80, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        // 订单状态:0:无效,1:有效，2：信息不完整
                        return stateArr[cellvalue];
                    }
                },
                { label: '跟进人', name: 'F_FlowUserName', width: 80, sortable: false, align: 'left' },

                {
                    label: '更新时间', width: 100, name: 'F_LastModifyTime', align: 'center',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i', newformat: 'Y-m-d H:i' }
                },
                {
                    label: '创建时间', width: 100, name: 'F_CreatorTime', align: 'center',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i', newformat: 'Y-m-d H:i' }
                },                
                { label: '编号', name: 'F_Id', hidden: true },
                { label: '需求编号', name: 'F_DemandId', hidden: true },
                { label: '联系人编号', name: 'F_ContactId', hidden: true },
                { label: '客户编号', name: 'F_ClientId', hidden: true },
                { label: '订单编号', name: 'F_OrderId', hidden: true },

            ],
            postData: {
                environment: 2,
                type: "all"
            },
            rowNum: 20,
            rowList: [20, 40, 60],
            pager: "#gridPager",
            sortname: 'F_State, F_OrderState, F_LastModifyTime',
            viewrecords: true,
            ondblClickRow: function (rowid, iRow, iCol, e) {
                var rowobj = $("#gridList").jqGridRowValue();
                btn_Update();
            }
        });
        $("#btn_search").click(function () {
            var queryJson = {
                keyword: $("#txt_keyword").val(),
                F_Source: $('#F_Source').val(),
                F_ActivityType: $('#F_ActivityType').val(),
                F_CreatorDate: $('#F_CreatorDate').val(),
                F_CreatorDate2: $('#F_CreatorDate2').val(),
                returnState: returnState
            };
            $gridList.jqGrid('setGridParam', {
                postData: { queryJson: JSON.stringify(queryJson) },
            }).trigger('reloadGrid');
        });
    }

    function btn_edit() {
        var keyValue = $("#gridList").jqGridRowValue().F_Id;
        $.modalOpen({
            id: "Form",
            title: "修改 ClientOrder",
            url: "/OrderFlowManage/ClientOrder/Form?keyValue=" + keyValue,
            width: "700px",
            height: "520px",
            callBack: function (iframeId) {
                top.frames[iframeId].submitForm();
            }
        });
    }



    //编辑
    function edit(id, title, mark) {
        var opt = {
            id: "editForm",
            title: title,
            url: "/OrderFlowManage/ClientOrder/ShowReturnVisit?orderId=" + id,
            width: "500px",
            height: "300px"
        };

        if (mark == 'detail') {
            $.extend(opt,
                {
                    btn: null
                });
        } else {
            $.extend(opt,
                {
                    callBack: function (iframeId) {
                        top.frames[iframeId].submitForm();
                    }
                });
        }

        $.modalOpen(opt);
    }

    //新增
    function btn_add() {
        edit('', '新建-流程步骤', 'add');
    }

    //编辑
    function btn_edit(id) {
        edit(id, '回访记录', 'edit');
    }


    function GetItems() {
        resultData = getCache("DEMAND_INDEX");
        if (!resultData || resultData.length <= 0) {
            $.ajax({
                url: "/ClientManager/DemandInfos/GetItems",
                dataType: "json",
                async: false,
                success: function (data) {
                    resultData = data;
                    InitControl();
                    setCache("DEMAND_INDEX", data);
                }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        } else {
            InitControl();
        }
    }

    function InitControl() {
        $("#F_CityId").bindSelect({
            url: "/ClientManager/ClientInfos/GetAllCitys",
            search: true,
            id: "F_EnCode",
            text: "F_FullName"
        });

        var F_ActivityType = resultData.F_ActivityType;
        var First_ActivityType = resultData.First_ActivityType;
        var strHtml = "";
        for (var j = 0; j < First_ActivityType.length; j++) {
            strHtml += "<optgroup label='" + First_ActivityType[j]["F_ItemName"] + "'>";
            for (var i = 0; i < F_ActivityType.length; i++) {
                if (First_ActivityType[j].F_ItemCode == F_ActivityType[i].F_Description) {
                    strHtml += "<option value='" + F_ActivityType[i].F_ItemCode + "'>" + F_ActivityType[i].F_ItemName + "</option>";
                }
            }
            strHtml += "</optgroup>";
        }
        $("#F_ActivityType").append(strHtml);

        var Clients = [];
        var SiteClients = resultData.SiteClients;
        for (var i = 0; i < SiteClients.length; i++) {
            Clients.push({ value: SiteClients[i].F_ClientName, data: SiteClients[i].F_Id });
        }

        $("#F_ClientName").autocomplete({
            lookup: Clients,
            onSelect: function (suggestion) {
                $("#hd_ClientName").val(suggestion.data);
            }
        });

        $('.btn-returnState').click(function () {
            $('.btn-returnState').removeClass("active");
            $(this).addClass('active');

            returnState = $(this).data('value');

            $("#btn_search").click();
        });
    }

    function btn_Update() {
        var userinfo = getCache("DLXX");
        var rowobj = $("#gridList").jqGridRowValue();

        if (rowobj.F_DemandId) {
            $.modalOpen({
                id: "editForm25",
                title: "需求详情",
                url: "/ClientManager/DemandInfos/Form?F_Id=" + rowobj.F_DemandId + "&contactId=" + rowobj.F_ContactId + "&F_ClientId=" + rowobj.F_ClientId + "&F_ProjectId=" + "&F_BrandId=" + "&F_OrderId=" + rowobj.F_Id + "&ishow=1",
                width: "1200px",
                height: "950px",
                callBack: function (iframeId) {
                    top.frames[iframeId].submitForm();
                },
                btn: null
            });
        } else {
            $.modalAlert("请选中行数据！", "warning");
        }

    }

    function redrawGrid() {
        $('#gbox_gridList').css('width', '');
        $('#gview_gridList').css('width', '');
        $('#gridPager').css('width', '');
        $('#gridList').css('width', '');
        $('table[class="ui-jqgrid-htable ui-common-table table table-bordered"]').css('width', '');
        $('div[class="ui-jqgrid-bdiv"]').css('width', '');
        $('div[class="ui-jqgrid-hdiv"]').css('width', '');
    }

</script>
